import { CustomSubTitle } from "@/components/customTitle";
import vipBookingStore from "@/store/vipbookingStore";
import { Descriptions, Divider, Flex } from "antd";
import styled from "styled-components";

const StyledBorderCard = styled("div")`
width: 100%
height: 101px;
padding: 24px 24px 24px 24px;
gap: 24px;
border-radius: 12px 0px 0px 0px;
background: #F7F5F1;
`;

const CustomLabel = styled.span`
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #696767;
`;

const CustomContent = styled.span`
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #202020;
`;
const CustomContentPrice = styled(CustomContent)`
  font-weight: 700;
`;
const ParkingInfo = () => {
  const { vipBookingData } = vipBookingStore();

  console.log(vipBookingData, "vipBookingData");
  return (
    <>
      <CustomSubTitle>Parking Information</CustomSubTitle>

      <StyledBorderCard>
        <Descriptions layout="vertical" column={4}>
          <Descriptions.Item label={<CustomLabel>Car Park</CustomLabel>}>
            <CustomContent>
              {vipBookingData?.parkingInfo?.carParkName || "-"}
            </CustomContent>
          </Descriptions.Item>
          <Descriptions.Item label={<CustomLabel>Entry Date</CustomLabel>}>
            <CustomContent>
              {vipBookingData?.parkingInfo?.entryDate || "-"}
            </CustomContent>
          </Descriptions.Item>
          <Descriptions.Item label={<CustomLabel>Entry Type</CustomLabel>}>
            <CustomContent>
              {vipBookingData?.parkingInfo?.entryDate || "-"}
            </CustomContent>
          </Descriptions.Item>
          <Descriptions.Item label={<CustomLabel>Parking period</CustomLabel>}>
            <CustomContent>
              {vipBookingData?.parkingInfo?.parkingPeriod || "-"}
            </CustomContent>
          </Descriptions.Item>
          <Descriptions.Item label={<CustomLabel>Payment Amount</CustomLabel>}>
            <CustomContentPrice>
              {vipBookingData?.parkingInfo?.payAmount || "-"}
            </CustomContentPrice>
          </Descriptions.Item>
        </Descriptions>
      </StyledBorderCard>
      <Divider plain></Divider>
    </>
  );
};

export default ParkingInfo;
